<template>
  <div class="page-system-config">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="基础配置" name="basic">
        <BasicConfigForm :configForm="configForm" />
      </el-tab-pane>
      <el-tab-pane label="邮件配置" name="email">
        <EmailConfigForm :configForm="configForm" />
      </el-tab-pane>
      <el-tab-pane label="地图配置" name="map">
        <MapConfigForm :configForm="configForm" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="SystemConfig">
import { ref } from 'vue'
import BasicConfigForm from './components/BasicConfigForm.vue'
import EmailConfigForm from './components/EmailConfigForm.vue'
import MapConfigForm from './components/MapConfigForm.vue'
import { apiGetConfig } from '@/http/service'
import { type Config } from '@/http/type'

const activeName = ref('basic')
const configForm = ref({} as Config)
async function queryConfigForm () {
  const data = await apiGetConfig<Config>()
  configForm.value = data
}
queryConfigForm()
</script>

<style lang="scss" scoped>
.page-system-config {
  height: 100%;
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    &--border-card {
      border: none;
    }
    :deep(.el-tabs__header) {
      border: none;
    }
    :deep(.el-tabs__item) {
      border: none !important;
    }
    :deep(.el-tabs__content) {
      flex: 1;
      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>
